<!-- 
.vue文件是单文件组件（SingleFileComponent/SFC） 
组件是页面中的一小块
-->

<!-- 组件的模板/DOM -->
<template>
   <div class="tab-content-wrapper">
      <!-- navbar -->
      <MyNavBar></MyNavBar>

      <div class="tabwrapper">
         <!-- 当路由为/film/nowPlaying时 会加载子组件NowPlaying到当前组件的RouterView中 -->
         <RouterLink
            active-class="active"
            class="tab"
            to="/film/nowPlaying">
            <span>正在热映</span>
         </RouterLink>

         <!-- 当路由为/film/comingSoon时 会加载子组件ComingSoon到当前组件的RouterView中 -->
         <RouterLink
            active-class="active"
            class="tab"
            to="/film/comingSoon">
            <span>即将上映</span>
         </RouterLink>
      </div>

      <!-- 目标组件的承载容器 -->
      <RouterView />
   </div>
</template>

<!-- 组件的互动脚本 -->
<script>
import { getPlayings, getComings } from "../api/movieApi";
import MyNavBar from "@components/MyNavBar.vue";

export default {
   components: {
      MyNavBar,
   },

   data() {
      return {
         playings: [],
         err: null,
      };
   },
};
</script>

<!-- 
组件的样式 
lang="scss" 使用scss语法编辑样式
scoped 加作用域（当前组件内定义的样式只作用于当前组件而不会下穿到子组件）
-->
<style lang="scss" scoped>
.tabwrapper {
   display: flex;
   border-bottom: 1px solid #eee;

   .tab {
      flex-grow: 1;
      height: 49px;
      line-height: 49px;
      text-align: center;
   }
}
</style>
